<template>
  <el-dialog :visible.sync="visible" title="漏洞信息" width="600px" :modal="true"
    :append-to-body="true"
    :close-on-click-modal="false"
    :destroy-on-close="true">
    <el-form :model="form" label-width="100px" ref="formRef">
      <el-form-item label="漏洞名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入漏洞名称"></el-input>
      </el-form-item>
      <el-form-item label="漏洞时间" prop="holeTime">
        <el-date-picker
          v-model="form.holeTime"
          type="datetime"
          placeholder="选择漏洞时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="漏洞类型" prop="type">
        <el-input v-model="form.type" placeholder="请输入漏洞类型" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="漏洞效果" prop="effect">
        <el-input v-model="form.effect" placeholder="请输入漏洞效果" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="漏洞描述" prop="desc">
        <el-input v-model="form.desc" placeholder="请输入漏洞描述" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="适用版本" prop="applicableVersion">
        <el-input v-model="form.applicableVersion" placeholder="请输入适用版本"></el-input>
      </el-form-item>
      <el-form-item label="使用条件" prop="condition">
        <el-input v-model="form.condition" placeholder="请输入使用条件" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="是否公开" prop="publicly">
        <el-select v-model="form.publicly" placeholder="请选择是否公开">
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否修复" prop="repaired">
        <el-select v-model="form.repaired" placeholder="请选择是否修复">
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="漏洞评分" prop="score">
        <el-input v-model="form.score" placeholder="请输入漏洞评分"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import dayjs from "dayjs"; // 确保正确引入 dayjs
export default {
  name: "dimensionitem",
  data() {
    return {
      visible: false,
      form: {}, // 表单数据
    };
  },
  methods: {
    open(data = {}) {
      this.form = { ...data }; // 接收父组件传递的数据并回显
      this.visible = true; // 打开弹出层
    },
    close() {
      this.visible = false; // 关闭弹出层
    },
    submit() {
    
      if (!this.form.name || !this.form.holeTime) {
        this.$message.error("请填写时间信息");
        return;
      }
      console.log("提交的数据:", this.form); // 打印提交的数据
      this.$emit("submit", this.form); // 将表单数据传递给父组件
      this.close();
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
/* 自定义弹窗背景色与字体颜色 */
::v-deep .el-dialog {
  background-color: #2e2e2e; /* 深色背景，可根据需求更换 */
  color: #ffffff; /* 白色字体 */
}

/* 自定义标题颜色 */
::v-deep .el-dialog__title {
  color: #ffffff;
}

/* 自定义表单标签字体颜色 */
::v-deep .el-form-item__label {
  color: #cccccc;
}

/* 自定义输入框字体颜色与背景 */
::v-deep .el-input__inner {
  background-color: #2e2e2e;
  color: #ffffff;
  border-color: #444;
}

/* 自定义下拉选择框背景和字体 */
::v-deep .el-select .el-input__inner {
  background-color: #2e2e2e;
  color: #ffffff;
  border-color: #444;
}

/* 自定义日期选择器背景和字体 */
::v-deep .el-date-editor.el-input {
  background-color: #2e2e2e;
  color: #ffffff;
}

/* 自定义按钮样式 */
::v-deep .el-button {
  background-color: #2e2e2e;
  color: #ffffff;
  border-color: #555;
}
::v-deep .el-dialog__body .el-textarea .el-textarea__inner {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border: 1px solid #555 !important;
}

</style>